@import '../../style/mixin.scss';

.layout {
    background-color: #fff;
}

.minerDetail {
    padding-top: 96px;

    .minerDetail-head {
        padding-bottom: 30px
    }

    .minerDetail-head-left {
        @include flex();
        position      : relative;
        flex-direction: column;
        padding       : 20px 0;
        border        : 1px solid #eee;

        h3 {
            @include font(18px, #000);
            font-weight: 600;
        }

        p {
            @include font(14px, #808080);
            margin: 0;
        }
    }

    .minerDetail-list {
        width : 90%;
        margin: auto;
    }

    .minerDetail-list-row {
        border: 1px solid #E6E6E6;

    }

    .minerDetail-list-title {
        @include font(14px, #000, right);
        padding         : 4px 10px;
        border-right    : 1px solid #E6E6E6;
        background-color: #F7F7F7;
    }

    .minerDetail-list-cont {
        @include font(14px, #000);
        padding    : 4px 10px;
        border-left: 1px solid #E6E6E6;
    }

    .minerDetail-title {
        border-bottom: 1px solid #eee;

        h3 {
            @include font(20px, #000);
            margin       : 0 0 0 30px;
            display      : inline-block;
            border-bottom: 2px solid $blue;
        }

        span {
            @include font(14px, #808080);
        }
    }

    .minerDetail-head-right {
        @include flex(space-between, flex-start);
        flex-direction: column;
        padding-left  : 30px;
        width         : 70%;

        h2 {
            @include font(24px, #000);
            margin-bottom: 30px;
            font-weight  : 600;
        }
    }

    .minerDetail-right-gray {
        width           : 100%;
        margin-bottom   : 20px;
        padding         : 20px;
        background-color: #F7F7F7;

        span {
            @include font(16px, #F8B657);
            padding-left: 10px;
        }

        big {
            @include font(30px, #F8B657);
            padding-left: 2px
        }

        p {
            @include font(16px, #000);
            padding-left: 10px;
            margin      : 0;
            font-weight : 600;
            display     : inline-block;
        }

    }

    .minerDetail-head-row {
        padding: 0;
        @include font(14px, #000);

        img {
            width       : 24px;
            margin-right: 5px;
        }

        .title {
            @include font(14px, #808080);
            width: 100px;
        }
    }

    .buy-btn {
        @include flex();
        margin-top: 20px;
        width     : 300px;
        height    : 60px;
    }


    .status {
        position: absolute;
        bottom  : 0;
        left    : 0;
        width   : 100%;
        height  : 100%;

    }

    img.minerDetail-head-img {
        height       : 160px;
        margin-bottom: 5px;
    }

    .detail {
        padding: 20px 30px 40px;

        h3 {
            @include font(16px, #000);
            margin-bottom: 5px;
        }

        .detail-text {
            @include font(12px, #808080);
            margin-bottom: 20px;
            line-height  : 26px;
        }
    }

    .detail-row {
        padding: 10px 0;
        @include font(14px, #808080);

        p {
            display   : inline-block;
            width     : 100px;
            text-align: right;
        }

        span {
            @include font(14px, #000);
        }

        big {
            @include font(18px, #000);
        }


        .question-icon {
            @include font(18px, #808080);
            margin-left: 10px;
        }

        .sure-btn {
            @include flex();
            @include font(16px, #fff);
            width      : 250px;
            height     : 50px;
            margin-left: 100px;

            span {
                color: #fff;
            }
        }

    }

    .input-number {
        position: relative;
    }

    .input-sub {
        margin-left: -55px;
        position   : absolute;
        line-height: 34px;
    }

    .pay-item {
        @include flex();
        display: inline-flex;
        border : 1px solid #eee;
        padding: 8px 20px;
        margin : 0 10px;
        cursor : pointer;

        img {
            width       : 24px;
            margin-right: 10px;
        }
    }

    .pay-item-active {
        @extend .pay-item;
        background-image: url(../../assets/img/select-box.png);
        background-size : 100% 100%;
    }

    .detail-box {
        background-color: rgba(63, 144, 250, 0.1);
        border          : 1px solid $blue;
        padding         : 20px 0;
        border-radius   : 50px;
    }

    .detail-box-item {
        @include flex();
        flex-direction: column;

        p {
            @include font(14px, #000);
            margin: 0;
        }

        .title {
            @include font(14px, #808080);
        }
    }

    .detail-chart {
        width      : 48%;
        margin     : 20px 0;
        padding-top: 20px;
        border     : 1px solid #eee;

        p {
            @include flex();
            @include font(14px, #000, center);
            width: 100%;
        }

        span {
            @include font(14px, #F8B657);
            padding-left: 5px;
        }
    }

    .detail-fun {
        @include flex(center, flex-start);
        padding         : 20px 30px;
        flex-direction  : column;
        background-color: #F7F7F7;

        h3 {
            @include font(16px, #000);
        }

        p {
            @include font(12px, #808080);
            margin     : 0;
            line-height: 26px;
        }
    }

}